<template>
  <div class="loginhome">
    <!-- 头部 -->
    <div class="loginheader">
      <span
        class="el-icon-s-fold"
        style="cursor: pointer; font-size: 30px; margin-top: 5px"
      ></span>
      <el-input v-model="findSong" placeholder="你耳朵听什么" class="findSong">
        <template slot="append">
          <el-button type="primary" @click="search">搜索</el-button>
        </template>
      </el-input>
    </div>
    <!-- 圆形图标入口列表 -->
    <div class="tuijianarrdiv">
      <span class="tuijianarr" v-for="(item, index) in findlist" :key="index">
        <el-button type="primary" @click="enter(index)">{{
          item.name
        }}</el-button>
      </span>
    </div>
    <div class="oneword">
      你耳朵听什么 <br />
      能不能告诉我
    </div>
    <div class="footerdiv">
      <Footer />
    </div>
  </div>
</template>

<script>
import Footer from "./Footer.vue";
export default {
  components: { Footer },
  data() {
    return {
      findlist: [],
      findSong: "",
    };
  },
  created() {
    this.getFindList();
  },
  methods: {
    search() {
      this.$router.push({
        path: "/search",
        query: { findSong: this.findSong },
      });
    },
    enter(index) {
      if (index == 0) {
        this.$router.push("/dailysongs");
      }
      if (index == 1) {
        this.$router.push({
          path: "/presonfm",
        });
      }
    },

    // 获取首页-发现-圆形图标入口列表
    getFindList() {
      this.axios
        .get(`/homepage/dragon/ball`)
        .then((res) => {
          this.findlist = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.findSong {
  width: 280px;
  margin-left: 20px;
}

.tuijianarrdiv {
  width: 350px;
  height: 150px;
  margin-top: 20px;
  display: flex;
  flex-flow: wrap;
  flex-direction: column;
  margin-left: 20px;
}

.tuijianarr {
  margin-left: 20px;
  margin-top: 10px;
}
.footerdiv {
  margin-top: 200px;
  margin-left: 20px;
}
.oneword {
  text-align: center;
  font-size: 36px;
  margin-top: 50px;
  margin-left: 20px;
}
</style>